<template>
  <div id="app">
    <router-view />
    <Footer v-show="footer" />
    <van-overlay :show="showOverlay" @click="showOverla">
      <div class="wrapper">
    <div class="block">
      <video id="v" class="block" :src="videoSRC.src" :poster="videoSRC.img" controls></video>
    </div>
  </div>
    </van-overlay>
  </div>
</template>

<script>
import Footer from './components/common/Footer.vue'

import { mapState, mapMutations } from 'vuex'
// import './assets/css/element'
export default {
  name: 'App',
  components: {
    Footer
  },
  computed: {
    ...mapState(['footer', 'showOverlay', 'videoSRC'])
  },
  methods: {
    ...mapMutations(['changeOverlay']),
    showOverla() {
      const v = document.querySelector('#v')
      v.pause()
      this.changeOverlay(false)
    }
  }
}
</script>

<style lang="less">
.wrapper {
    display: flex;
    justify-content: center;
    padding-top: (200/16rem);
    height: 100%;
    
  .block {
    width: (335/16rem);
    height: (200/16rem);
    background-color: black;
  }
  }
</style>
